/* eslint-disable prettier/prettier */
import React, { useState, useRef, useEffect, useCallback } from 'react';
import { View, Text, TextInput, FlatList, StyleSheet, SafeAreaView, Keyboard, Image, TouchableWithoutFeedback, TouchableOpacity, PermissionsAndroid } from 'react-native';
import 'dayjs/locale/zh-cn';
import { pTx } from "../../utils/dimensions"
import { debounce } from "../../utils/useDebounce"
import { getLaunchImageLibrary } from "../../utils/launchImageLibrary"
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import { useNavigation } from '@react-navigation/native';
import Realm from "realm"
import VoicePressable from "../../components/voicePressable"
import httpApi from "../../api"
import ImageEquallyEnlarge from "../../components/imageEquallyEnlarge"
import ImageEquallyEnlargeVideo from "../../components/imageEquallyEnlargeVideo"
import PersonalBusinessCard from "../../components/personalBusinessCard"
import FriendTransferInApp from "../../components/friendTransferInApp"
import FriendGrabRedPacket from "../../components/friendGrabRedPacket"
import FriendRedPacketInApp from "../../components/friendRedPacketInApp"
import PlayVoice from "../../components/playVoice"
import EmojiSelectorList from "../../components/emojiSelectorList"
import ImageView from "react-native-image-viewing";
import AudioRecorderPlayer from 'react-native-audio-recorder-player';
import IconFont from '@pingtou/rn-vant-icons'
import { Badge } from '@pingtou/rn-vant'
import { isImageFormat } from '../../utils/fileFormat'
import Avatar from "../../components/avatar"
const audioRecorderPlayer = new AudioRecorderPlayer();

/**
 *  100 条历史消息，先给 10 条最新的，再给 10 条
 *  也就是先给 91 - 100, 再给 81 - 90, 依次类推
 */
const getData = (page, size, msgLis) => {
    return new Promise(resolve => {
        const allData = msgLis
        const newRes = allData.slice(page * size, page * size + size)
        resolve(newRes);
    });
};

const isAuthor = (id) => !(id > 0)
const RenderItemInfo = (props) => {
    const [visible, setVisible] = useState(false)
    const [images, setImages] = useState([])
    const { item, index, updateParentState, playVoiceRefs } = props
    const M = item.M?.split(' ')
    switch (item.MT) {
        case 0:
            return <Text style={[styles.messageText, isAuthor(item.S) && { backgroundColor: "rgba(6, 193, 97, 1)", color: "#fff" }]} selectable={true}>{item.M}</Text>
        case 2:
            return <TouchableWithoutFeedback onPress={() => {
                setVisible(true)
                setImages([
                    {
                        uri: (M[1].slice(0, 4) != "file" ? httpApi.inline : "") + M[1]
                    }
                ])
            }}>
                <View>
                    <ImageEquallyEnlarge
                        style={styles.imageEqually}
                        source={{ uri: (M[1].slice(0, 4) != "file" ? httpApi.inline : "") + M[1] }}
                        width={pTx(100)}
                    />
                    {visible && <ImageView
                        images={images}
                        imageIndex={0}
                        visible={visible}
                        onRequestClose={() => setVisible(false)}
                    />}
                </View>
            </TouchableWithoutFeedback>
        case 3:
            return <ImageEquallyEnlargeVideo {...props} style={styles.imageEqually}
                source={require('../../assets/image/icon36.png')}
                width={pTx(120)}></ImageEquallyEnlargeVideo>
        case 5:
            return <TouchableWithoutFeedback onPress={() => props.onStopPlayDebounce(item, item._id)}>
                <View>
                    <PlayVoice
                        ref={(ref) => {
                            props.playVoiceRefs[item._id] = ref;
                        }}
                        {...props}
                        item={item}
                    />
                </View>
            </TouchableWithoutFeedback>
        case 6:
            return <PersonalBusinessCard {...props} item={item} />
        case 7:
            return <FriendTransferInApp {...props} item={item} />
        case 9:
            return <FriendGrabRedPacket {...props} item={item} />
        case 60:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>{item.M}</Text>
            </View>
        case 61:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>{item.R}申请加入群聊</Text>
            </View>
        case 62:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>{item.R}加入了群聊</Text>
            </View>
        case 63:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>{item.R}加群失败</Text>
            </View>
        case 65:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>邀请{item.R}进群</Text>
            </View>
        case 69:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>{item.R}已被移出</Text>
            </View>
        case 70:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>{item.R}退出了群聊</Text>
            </View>
        case 71:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>已将{item.R}添加为群管理员</Text>
            </View>
        case 72:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>已将{item.R}从群管理员中移出</Text>
            </View>
        case 73:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>{item.R}转移群主</Text>
            </View>
        case 99:
            return <View style={styles.participate}>
                <Text style={styles.participateText}>该群聊已解散</Text>
            </View>

    }
}
const DetailScreen = ({ detailScreenRefs, params }) => {
    const realm = useRealm();
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];
    const groupMsgLis = useQuery(schemaName.GroupMsgLis, groupMsg => {
        return groupMsg.filtered(`G == ${params.G} and UserId == ${userInfo.Id}`).sorted('T', true)
    })

    const navigation = useNavigation();
    const playVoiceRefs = useRef(null)
    const [playVoiceRefsIndex, setPlayVoiceRefsIndex] = useState("")
    const curPageRef = useRef(1);
    const SIZE = 20;
    const [msgLis, setMsgLis] = useState(JSON.parse(JSON.stringify(groupMsgLis.filtered(` F != ${userInfo.Id}  &&  MT > 5`)))); // 过滤自己发
    const [data, setData] = useState(groupMsgLis.slice(0, SIZE));


    const handleOnEndReached = () => {
        getData(curPageRef.current, SIZE, msgLis).then(res => {
            setData([...data, ...res]);
        });
        curPageRef.current += 1;
    };

    const sendText = (msg) => {
        setData([msg, ...data])
    }

    const onMsgChange = (msg, changes) => {
        changes.insertions.forEach((index) => {
            const msgs = msg[index]
            if (msgs.MT != 61) {
                realm.write(() => {
                    msgs.Unread = 0
                });
            }
            if (msgs.SendState == 2) {
                setList(prev => prev.map((element, idx) => {
                    element.SendState = msgs.SendState
                    return element
                }))
            } else {
                if (msgs.S == -1 && msgs.MT == 0) return
                // if (msgs.F == userInfo.Id && msgs.MT <= 5) return //自己发
                setData([msgs, ...data])
            }
        });
    }

    useEffect(() => {
        realm.write(() => {
            const UnreadList = groupMsgLis.filtered(`Unread == 1 and MT != 61`)
            for (const Msg of UnreadList) {
                Msg.Unread = 0
            }
        })
    }, [data]);

    useEffect(() => {
        groupMsgLis.addListener(onMsgChange);
        return () => {
            groupMsgLis.removeListener(onMsgChange);
        };
    }, [data]);

    const onStopPlayDebounce = debounce(async ([item, index]) => {
        audioRecorderPlayer.stopPlayer();
        audioRecorderPlayer.removePlayBackListener();
        playVoiceRefs[playVoiceRefsIndex]?.onStopPlay()
        if (!item) return setPlayVoiceRefsIndex(null)
        const [time, uri] = item?.M?.split(' ')
        if (playVoiceRefsIndex != index) {
            setPlayVoiceRefsIndex(index)
            await audioRecorderPlayer.startPlayer(httpApi.inline + uri);
            playVoiceRefs[index]?.onStartPlay()
        } else {
            setPlayVoiceRefsIndex(null)
        }
    }, 100, false)

    detailScreenRefs.current = {
        onStopPlayDebounce,
        sendText
    }


    const renderItem = ({ item, index }) => {
        const hideMT = [60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 99]
        return (item.F && <View>
            <View style={[styles.renderUserItem, isAuthor(item.S) && styles.renderUserItemRowReverse]}>
                {(hideMT.indexOf(item.MT) === -1) && <View style={styles.renderAvatar}>
                    <TouchableWithoutFeedback onPress={() => {
                        navigation.navigate('friendInfo', {
                            G: item.G,
                            Id: item.F,
                            NickName: item.R || userInfo.NickName,
                            ProfilePhoto: item.P || userInfo.ProfilePhoto,
                            Address: isAuthor(item.S) && userInfo.ProfilePhoto,
                        })
                    }}>
                        <Avatar style={[styles.avatar]} source={{ uri: isAuthor(item.S) ? userInfo.ProfilePhoto : item.P }} />
                    </TouchableWithoutFeedback>
                </View>
                }
                <View>
                    {!isAuthor(item.S) && <>
                        {(hideMT.indexOf(item.MT) === -1) && <Text style={[styles.stylesName, isAuthor(item.S) && { textAlign: "right" }]}>{!isAuthor(item.S) ? item.R : userInfo.NickName}</Text>}
                    </>}
                    <RenderItemInfo playVoiceRefs={playVoiceRefs} navigation={navigation} onStopPlayDebounce={onStopPlayDebounce} params={params} item={item} />
                </View>
            </View>
            {item.SendState == 3 && <Text style={styles.youNotFriendText}>无法在已解散的群聊中发送信息</Text>}
        </View>
        )
    }
    const keyboardDismiss = () => {
        Keyboard.dismiss();
    }
    return (
        <>
            <FlatList
                style={{ flex: 1 }}
                onEndReached={handleOnEndReached}
                renderItem={renderItem}
                contentContainerStyle={{
                    flexGrow: 1,
                    justifyContent: 'flex-end',
                }}
                removeClippedSubviews={true}
                inverted
                data={data}
                onScroll={keyboardDismiss}
                initialNumToRender={20}
                keyExtractor={(item, index) => index}
            />

        </>
    );
};

const DetailScreenhildComponent = React.memo(DetailScreen);

const GroupMsg = (props) => {
    const detailScreenRefs = useRef()
    const sendRedPacketInRefs = useRef(null)
    const textInputRef = useRef(null);

    const [isTextVoice, setIsTextVoice] = useState(false)
    const [moreFeaturesOpen, setMoreFeaturesOpen] = useState(false)
    const [openEmoji, setOpenEmoji] = useState(false)

    const [text, setText] = useState("")
    const params = props.route.params

    const realm = useRealm();
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];
    const groupInfo = useQuery(schemaName.GroupInfo, Info => {
        return Info.filtered(`Id == ${params.G} and UserId == ${userInfo.Id}`);
    })[0];

    const groupMsgLis = useQuery(schemaName.GroupMsgLis, groupMsg => {
        return groupMsg.filtered(`G == ${params.G} and UserId == ${userInfo.Id}`).sorted('T', true)
    })
    const groupMsgLisJoineply = groupMsgLis.filtered(`MT == 61 and Unread == 1`).sorted('T', true)
    const groupMsgLisJoineplyNewMember = groupMsgLis.filtered(`MT => 62 and Unread == 1`).sorted('T', true)

    const [title, setTitle] = useState(groupInfo?.GroupName || props.route.params.R)

    useEffect(() => {
        httpApi.getGroupInfo({ groupId: params.G }).then(res => {
            if (res.code == 20) {
                // if (res.data.Group.GroupName != title) {
                //     setTitle(res.data.Group.GroupName)
                // }
                setTitle(res.data.Group.GroupName)
                realm.write(() => {
                    realm.create(schemaName.GroupList, { G: params.G, P: res.data.Group.Logo, R: res.data.Group.GroupName }, true);
                    realm.create(schemaName.GroupInfo, { ...res.data.Group, UserId: userInfo.Id }, true);
                })
            }
        })
        getGroupMembers()
    }, [title])

    const getGroupMembers = useCallback(() => {
        httpApi.getGroupMembers({
            groupId: params.G,
            userid: 0,//用户id从0开始传，后续取前一个分页的最大userid
            num: "14"
        }).then(res => {
            if (res.code == 20) {
                const group = res.data.Group
                realm.write(() => {
                    realm.delete(realm.objects(schemaName.GroupMembers).filtered(`G == ${params.G} and UserId == ${userInfo.Id}`))
                })
                realm.write(() => {
                    group && group.map(item => realm.create(schemaName.GroupMembers, { ...item, _G_I: '_' + params.G + '_' + item.I, G: params.G, UserId: userInfo.Id }, true))
                })
            }
        })
        httpApi.getGroupAdmins({
            groupId: params.G,
        }).then(res => {
            if (res.code == 20) {
                const admin = res.data.AdminList
                realm.write(() => {
                    realm.delete(realm.objects(schemaName.GroupAdmins).filtered(`G == ${params.G} and UserId == ${userInfo.Id}`))
                })
                realm.write(() => {
                    admin && admin.map(item => realm.create(schemaName.GroupAdmins, { ...item, _G_I: '_' + params.G + '_' + item.Id, G: params.G, UserId: userInfo.Id }, true))
                })
            }
        })
    })
    // const onGroupMsgLisJoineplyNewMemberChange = (dogs, changes) => {
    //     changes.insertions.forEach((index) => {
    //         const newMsg = dogs[index]
    //         if ([65, 98, 99][newMsg.MT] == -1) {
    //         }
    //         getGroupMembers(newMsg.MT)

    //     });
    // }
    // useEffect(() => {
    //     groupMsgLisJoineplyNewMember.addListener(onGroupMsgLisJoineplyNewMemberChange);
    //     return () => {
    //         groupMsgLisJoineplyNewMember.removeListener(onGroupMsgLisJoineplyNewMemberChange);
    //     };
    // }, []);


    const onTextSend = useCallback(async () => {
        const Text = text
        setText("")
        setTimeout(async () => {
            var timestamp = Date.parse(new Date()) / 1000
            const realmItem = {
                G: params.G,
                F: params.F,
                M: Text,
                MT: 0,
                S: -1,
                T: timestamp,
                _id: new Realm.BSON.UUID(),
                Unread: 0,
                UserId: userInfo.Id
            }
            detailScreenRefs.current.sendText(realmItem)
            realm.write(() => {
                realm.create(schemaName.GroupMsgLis, realmItem, true);
            })
            const res = await httpApi.sendGroupText({ message: realmItem.M, groupId: params.G })
            if (res.code != 20) {
                realm.write(() => {
                    realm.create(schemaName.GroupMsgLis, { ...realmItem, SendState: 2 }, true);
                })
            }
        })
    })
    const sendFriendFile = async () => {
        try {
            let File = await getLaunchImageLibrary()
            File = File.uri ? File : File[0]
            const msgType = isImageFormat(File) ? 2 : 3
            var timestamp = Date.parse(new Date()) / 1000
            let MsgLisLength = new Realm.BSON.UUID()
            const realmItem = {
                G: params.G,
                F: params.F,
                M: File.fileSize + " " + File.uri + " " + File.fileName,
                MT: msgType,
                T: timestamp,
                S: -1,
                _id: MsgLisLength,
                Unread: 0,
                UserId: userInfo.Id
            }
            realm.write(() => {
                realm.create(schemaName.GroupMsgLis, realmItem, true);
            })
            const image = await httpApi.uploadMinio(File)

            const res = await httpApi.sendGroupFile({
                groupId: params.G,
                msgType,
                srcFileName: File.fileName,
                dstFileName: image.data.FileNames[0],
                fileSize: File.fileSize
            })
            if (res.code != 20) {
                realm.write(() => {
                    realm.create(schemaName.GroupMsgLis, { ...realmItem, SendState: 2 }, true);
                })
            }
        } catch (error) {
        }
    }

    useEffect(() => {
        const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
            setIsTextVoice(false)
            setMoreFeaturesOpen(false)
            setOpenEmoji(false)
        });
        const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
        });

        return () => {
            showSubscription.remove();
            hideSubscription.remove();
        };
    }, []);

    useEffect(() => {
        props.navigation.setOptions({
            headerTitle: ({ options }) => (
                <Text style={styles.headerTitle} ellipsizeMode={'tail'} numberOfLines={1}>{groupInfo?.GroupName || title}</Text>
            ),
            headerRight: ({ options }) => (
                <TouchableWithoutFeedback onPress={() => props.navigation.navigate('groupInfoMaterial', { ...props.route.params })}>
                    <View style={[styles.headerRightIcon]}>
                        {
                            (!groupMsgLis.filtered(`MT == 99`)[0]) &&
                            <Badge dot={!!groupMsgLisJoineply.length}>
                                <IconFont name="ellipsis" size={pTx(26)} />
                            </Badge>
                        }
                    </View>

                </TouchableWithoutFeedback>
            )
        }, [title, groupMsgLisJoineply.length]);
        if (Platform.OS === 'android') {
            try {
                PermissionsAndroid.requestMultiple([
                    PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                    PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
                    PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
                ]).then(grants => {
                    if (
                        grants['android.permission.WRITE_EXTERNAL_STORAGE'] ===
                        PermissionsAndroid.RESULTS.GRANTED &&
                        grants['android.permission.READ_EXTERNAL_STORAGE'] ===
                        PermissionsAndroid.RESULTS.GRANTED &&
                        grants['android.permission.RECORD_AUDIO'] ===
                        PermissionsAndroid.RESULTS.GRANTED
                    ) {
                    } else {
                        return;
                    }
                })

            } catch (err) {
                return;
            }
        }
    }, [groupMsgLis.length])
    return (
        <SafeAreaView style={styles.mainContent}>
            <DetailScreenhildComponent detailScreenRefs={detailScreenRefs} params={params} />
            {(!groupMsgLis.filtered(`MT == 99`)[0]) &&
                <View >
                    {[2, 10, 18].indexOf(groupInfo?.Status) == -1 ?
                        <View>
                            <View style={styles.footRender}>
                                <View style={styles.footRenderRow}>
                                    <TouchableOpacity onPress={() => {
                                        setIsTextVoice(isTextVoice ? false : true)
                                        setMoreFeaturesOpen(false)
                                        setOpenEmoji(false)
                                        setTimeout(() => {
                                            isTextVoice && textInputRef?.current && textInputRef.current.focus()
                                        })
                                    }}>
                                        <View style={[{ marginLeft: pTx(8) }]}>
                                            <Image style={[styles.footImage]} source={isTextVoice ? require('../../assets/image/icon35.png') : require('../../assets/image/icon13.png')}></Image>
                                        </View>
                                    </TouchableOpacity>
                                    <View style={styles.renderComposer}>
                                        {!isTextVoice ? <TextInput ref={textInputRef} value={text} onChangeText={(e) => setText(e)} style={[styles.composer]} multiline
                                        />
                                            :
                                            <VoicePressable
                                                {...props}
                                                onStopPlayDebounce={() => detailScreenRefs.current.onStopPlayDebounce()} />
                                        }
                                    </View>
                                    <View style={styles.rightRenderSend}>
                                        <TouchableOpacity onPress={() => {
                                            Keyboard.dismiss();
                                            setTimeout(() => {
                                                setOpenEmoji(openEmoji ? false : true)
                                                setMoreFeaturesOpen(false)
                                                setIsTextVoice(false)
                                            }, 100)
                                        }}>
                                            <Image style={[styles.footImage]} source={require('../../assets/image/icon12.png')}></Image>
                                        </TouchableOpacity>
                                        {text && !isTextVoice ? <Text style={[styles.sendBtn]} onPress={() => onTextSend()}>
                                            发送
                                        </Text>
                                            :
                                            <TouchableOpacity onPress={() => {
                                                Keyboard.dismiss();
                                                setTimeout(() => {
                                                    setOpenEmoji(false)
                                                    setMoreFeaturesOpen(moreFeaturesOpen ? false : true)
                                                    // setIsTextVoice(true)
                                                }, 100)
                                            }}>
                                                <Image style={[styles.footImage]} source={require('../../assets/image/icon14.png')}></Image>
                                            </TouchableOpacity>
                                        }
                                    </View>
                                </View>
                                <View>
                                    {moreFeaturesOpen && <View style={[styles.moreFeatures]}>
                                        <TouchableWithoutFeedback onPress={() => sendFriendFile()}>
                                            <View style={[styles.featuresCell]}>
                                                <Image style={styles.featuresImage} source={require('../../assets/image/icon26.png')}></Image>
                                                <Text style={styles.featuresTexy}>图片</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback>
                                            <View style={[styles.featuresCell]}>
                                                <Image style={styles.featuresImage} source={require('../../assets/image/icon27.png')}></Image>
                                                <Text style={styles.featuresTexy}>文件</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback>
                                            <View style={[styles.featuresCell]}>
                                                <Image style={styles.featuresImage} source={require('../../assets/image/icon28.png')}></Image>
                                                <Text style={styles.featuresTexy}>语音聊天</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback>
                                            <View style={[styles.featuresCell]}>
                                                <Image style={styles.featuresImage} source={require('../../assets/image/icon25.png')}></Image>
                                                <Text style={styles.featuresTexy}>视频聊天</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback>
                                            <View style={[styles.featuresCell]}>
                                                <Image style={styles.featuresImage} source={require('../../assets/image/icon23.png')}></Image>
                                                <Text style={styles.featuresTexy}>红包</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback >
                                            <View style={[styles.featuresCell]}>
                                                <Image style={styles.featuresImage} source={require('../../assets/image/icon29.png')}></Image>
                                                <Text style={styles.featuresTexy}>转帐</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback >
                                            <View style={[styles.featuresCell]}>
                                                <Image style={styles.featuresImage} source={require('../../assets/image/icon24.png')}></Image>
                                                <Text style={styles.featuresTexy}>名片</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                    </View>
                                    }
                                    {openEmoji && <EmojiSelectorList state={(el) => setText(text + el)} />}
                                </View>
                            </View >
                            <FriendRedPacketInApp {...props} ref={sendRedPacketInRefs} />
                        </View> : <Text style={styles.banned}>已禁言</Text>}
                </View>
            }
        </SafeAreaView >
    )
}

export default GroupMsg

const styles = StyleSheet.create({
    headerTitle: {
        maxWidth: pTx(250),
        fontSize: pTx(18),
        color: "#000"
    },
    headerRightIcon: {
        paddingRight: pTx(15),
    },
    message: {
        fontSize: 30,
        flex: 1,
        margin: 10,
        backgroundColor: '#FFF',
    },
    mainContent: {
        flex: 1,
        backgroundColor: 'rgba(237, 237, 237, 1)',
    },
    footRender: {
        paddingVertical: pTx(9),

        backgroundColor: "rgba(247, 247, 247, 1)",
    },
    footRenderRow: {
        flexDirection: "row",
        alignItems: "flex-end",
    },
    renderComposer: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
    },
    composer: {
        flex: 1,
        fontSize: pTx(16),
        borderRadius: pTx(4),
        minHeight: pTx(40),
        paddingVertical: pTx(2),
        paddingHorizontal: pTx(10),
        backgroundColor: "#ffffff",
    },
    renderUserItem: {
        paddingVertical: pTx(10),
        flexDirection: "row",
        alignItems: "flex-start"
    },
    renderUserItemRowReverse: {
        flexDirection: "row-reverse",
    },
    renderAvatar: {
        paddingHorizontal: pTx(15),
    },
    avatar: {
        height: pTx(40),
        width: pTx(40),
        borderRadius: pTx(8),
    },
    messageText: {
        paddingVertical: pTx(10),
        fontSize: pTx(15),
        color: "#333333",
        paddingHorizontal: pTx(10),
        backgroundColor: "#ffffff",
        borderRadius: pTx(8),
        maxWidth: pTx(260),
    },
    youNotFriendText: {
        paddingHorizontal: pTx(20),
        textAlign: "center",
        opacity: 0.6,
        fontSize: pTx(12),
    },


    sendBtn: {
        paddingHorizontal: pTx(12),
        marginBottom: pTx(5),
        height: pTx(30),
        fontSize: pTx(16),
        color: "#fff",
        backgroundColor: "rgba(6, 193, 97, 1)",
        borderRadius: pTx(4),
        textAlignVertical: "center"
    },
    containerStyle: {
        backgroundColor: "#EDEDED",
        paddingVertical: pTx(8),
    },
    textInputStyle: {
        fontSize: pTx(16),
        borderRadius: pTx(4),
        minHeight: 0,
        paddingVertical: pTx(5),
        paddingHorizontal: pTx(10),
        marginVertical: 0,
        backgroundColor: "#ffffff",
    },
    rightRenderSend: {
        marginHorizontal: pTx(10),
        flexDirection: "row",
        alignItems: "center"
    },
    footImage: {
        marginRight: pTx(8),
        marginBottom: pTx(4),
        width: pTx(30),
        height: pTx(30),
    },


    moreFeatures: {
        flexDirection: "row",
        flexWrap: "wrap",
        columnGap: pTx(32),
        paddingHorizontal: pTx(27),
        paddingTop: pTx(13),
    },
    featuresCell: {
        marginVertical: pTx(8),
        alignItems: "center",
    },
    featuresImage: {
        height: pTx(53),
        width: pTx(53),
    },
    featuresTexy: {
        marginTop: pTx(5),
        textAlign: "center",
        fontSize: pTx(12),
        color: "#727272"
    },

    imageEqually: {
        marginTop: pTx(5),
    },
    backgroundVideo: {
        width: pTx(150),
        height: pTx(100),
        backgroundColor: "#000"
    },
    RedPacketBox: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center"
    },
    RedPacket: {
        textAlign: "center",
        fontSize: pTx(12),
    },
    participate: {
        flex: 1,
        width: pTx(375),
    },
    participateText: {
        textAlign: "center",
        fontSize: pTx(12),
        opacity: 0.5,
        paddingHorizontal: pTx(30),
    },
    stylesName: {
        fontSize: pTx(13),
        marginBottom: pTx(3),
    },
    banned: {
        paddingVertical: pTx(20),
        textAlign: "center",
        fontSize: pTx(16),
    }
});

